<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>Document</title>
    <link rel="stylesheet"  type="text/css" href="../css/menu5.css">
    <link rel="stylesheet"  type="text/css" href="../css/menu5-0.css">
    <link rel="stylesheet" href="../js/menu5.js">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div style="position: fixed;width: 100%;">
        <div class="top" style="height: 90px;background-color: white;min-width: 1000px;">
            <div class="header_left" style="float: left;" width="13.14%">
                <img src="https://via.placeholder.com/250x90" >
            </div>
            <ul style="float: right;" class="ulmenu" style="min-width: 1900px;">
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航一</a></li>
                <li class="li0"onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航二</a></li>
                <li class="li0" id="menu" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航三</a>
                    <div>
                        <ul id="move_menu">
                            <li><a href="">子导航一</a></li>
                            <li><a href="">子导航二</a></li>
                            <li><a href="">子导航三</a></li>
                            <li><a href="">子导航四</a></li>
                            <li><a href="">子导航五</a></li>
                        </ul>
                    </div>
                </li>
                <li class="li0" id="menu" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航四</a>
                    <ul id="move_menu">
                        <li><a href="">子导航一</a></li>
                        <li><a href="">子导航二</a></li>
                        <li><a href="">子导航三</a></li>
                        <li><a href="">子导航四</a></li>
                    </ul>
                </li>
                <li class="li2" id="menu"><a class="a1" href="menu5.html">导航五</a>
                    <ul id="move_menu">
                        <li><a href="menu5-1.html">子导航一</a></li>
                        <li><a href="menu5-2.html">子导航二</a></li>
                        <li><a href="menu5-3.html">子导航三</a></li>
                        <li><a href="menu5-4.html">子导航四</a></li>
                    </ul>
                </li>
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航六</a></li>
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航七</a></li>
            </ul>
        </div>
    </div>

    <img src="https://via.placeholder.com/1920x400" width="100%" style="margin-top: 82px;">
        
    <div class="left" style="position: fixed;">
        <ul>
            <li class="li1" onclick="sel(this);" style="background-color: #99d022;"><a href="#floor1"><h1 class="h11" style="color: #fff;">01&nbsp;&nbsp;<span>标题一</span></h1></a></li>
            <li class="li1" onclick="sel(this);"><a href="#floor2"><h1 class="h11">02&nbsp;&nbsp;<span>标题二</span></h1></a></li>
            <li class="li1" onclick="sel(this);"><a href="#floor3"><h1 class="h11">03&nbsp;&nbsp;<span>标题三</span></h1></a></li>
            <li class="li1" onclick="sel(this);"><a href="#floor4"><h1 class="h11">04&nbsp;&nbsp;<span>标题四</span></h1></a></li>
        </ul>
    </div>

        <div class="floor1" id="floor1">
            <div id="floor1-01"><img src="https://via.placeholder.com/61x152"></div>
            <div id="titmin"><p>标题一</p></div>
            <p id="floor1txt">内容</p>
            <div class="title1-1">
                <p id="floor1tit">标题1-1</p>
            </div>
            <img src="https://via.placeholder.com/1040x404" width="100%">
            <p id="floor1txt">内容</p>
            <div class="title1-1">
                <p id="floor1tit">标题1-2</p>
            </div>
            <img src="https://via.placeholder.com/806x533" width="77.5%" id="floor1-2pic">
            <p id="floor1txt">内容</p>
            <div id="pictit">图片标题</div>
            <img src="https://via.placeholder.com/990x362" width="95%" id="floor1-3pic">
            <div class="title1-1">
                <p id="floor1tit">标题1-3</p>
            </div>
            <div id="floor1-3txt">内容</div>
            <img src="https://via.placeholder.com/463x265" width="44.5%" id="floor1-4pic">
            <div style="clear: both;"></div>
        </div>
        
        <div class="floor2" id="floor2">
            <div id="bgimg">
            <div id="floor21">
                <div id="floor22"><img src="https://via.placeholder.com/61x152" alt=""></div>
                <div id="titmin"><p>标题二</p></div>
                <img src="https://via.placeholder.com/1040x352" alt="" width="100%">
                <img src="https://via.placeholder.com/480x316" alt="" width="46.15%"  id="floor1-4pic">
                <div id="floor23">
                    <img src="https://via.placeholder.com/35x35" alt="" width="7.78%" id="floor1-01">
                    <div id="floor24tit">标题2-1</div>
                    <div id="floor25">
                        <span><span id="col">内容：</span>内容</span><br>
                        <span><p id="col">内容：</p>内容</span>
                    </div>               
                </div>

                <img src="https://via.placeholder.com/480x316" alt="" width="46.15%" >
                <div id="floor23" style="float: right;">
                    <img src="https://via.placeholder.com/35x35" alt="" width="7.78%"  id="floor1-01">
                    <div id="floor24tit">标题2-2</div>
                    <div id="floor25">
                        <span><span id="col">内容：</span>内容</span><br>
                        <span><p id="col">内容：</p>内容</span>
                    </div>               
                </div>

                <img src="https://via.placeholder.com/480x316" alt="" width="46.15%"  id="floor1-4pic">
                <div id="floor23">
                    <img src="https://via.placeholder.com/35x35" alt="" width="7.78%"  id="floor1-01">
                    <div id="floor24tit">标题2-3</div>
                    <div id="floor25">
                        <span><span id="col">内容：</span>内容</span><br>
                        <span><p id="col">内容：</p>内容</span>
                    </div>               
                </div>

                <img src="https://via.placeholder.com/480x316" alt="" width="46.15%" >
                <div id="floor23" style="float: right;">
                    <img src="https://via.placeholder.com/35x35" alt="" width="7.78%"  id="floor1-01">
                    <div id="floor24tit">标题2-4</div>
                    <div id="floor25">
                        <span><span id="col">内容：</span>内容</span><br>
                        <span><p id="col">内容：</p>内容</span>
                    </div>               
                </div>
                
                <img src="https://via.placeholder.com/480x316" alt="" width="46.15%" id="floor1-4pic">
                <div id="floor23">
                    <img src="https://via.placeholder.com/35x35" alt="" width="7.78%"  id="floor1-01">
                    <div id="floor24tit">标题2-5</div>
                    <div id="floor25">
                        <span><span style="color: #99d022;">内容：</span>内容</span><br>
                        <span><p style="color: #99d022;">内容：</p>内容</span>
                    </div>               
                </div>
            </div>
            </div>
        </div>

        <div class="floor3" id="floor3">
            <div id="bgimg">
                <div id="floor21">
                    <div id="floor22"><img src="https://via.placeholder.com/61x152" alt=""></div>
                    <div id="titmin"><p>标题三</p></div>
                    <img src="https://via.placeholder.com/1040x593" alt="" width="100%" id="floor31">
                </div>
            </div>
        </div>

        <div class="floor4" id="floor4">
            <div id="bgimg">
                <div id="floor21">
                    <div id="floor22"><img src="https://via.placeholder.com/61x152" alt=""></div>
                    <div id="floor41">
                        <p>标题四</p>
                        <p id="floor42txt">内容</p>
                    </div>
                    <img src="https://via.placeholder.com/700x143" alt="" width="67.3%" id="floor43img">
                    <img src="https://via.placeholder.com/900x463" alt="" width="86.5%" id="floor44img">
                </div>
            </div>
        </div>

        <div class="btm">        
            <div class="left-icon" style="padding-left: 22%;">
                <img src="https://via.placeholder.com/24x24" alt=""><br>
                <img src="https://via.placeholder.com/24x24" alt="">
                <div style="clear: both;"></div>
            </div>
            <div class="btm-left" style="float: left;">
                <div>
                        <p>标题</p>
                        <div>内容</div>
                </div>
                <div>
                    <p>标题</p>
                    <div >内容</div>
                </div>              
            </div>
            <div class="left-icon">
                <img src="https://via.placeholder.com/24x24" alt="" ><br>
                <img src="https://via.placeholder.com/24x24" alt="">
                <div style="clear: both;"></div>
            </div>
            <div class="btm-left">
                <div>
                        <p>标题</p>
                        <div>内容</div>
                </div>
                <div>
                    <p >标题</p>
                    <div >内容</div>
                </div>              
            </div>
            <div class="btm-right">
                <div style="float: right;">
                    <img src="https://via.placeholder.com/102x102" alt="">
                    <p>二维码</p>
                </div>
                <div style="float: right;">
                    <img src="https://via.placeholder.com/102x102" alt="">
                    <p>二维码</p>
                </div>
                <div style="float: right;">
                    <img src="https://via.placeholder.com/102x102" alt="">
                    <p>二维码</p>
                </div>
            </div>
        
        </div>
        <div class="footer">
            内容
        </div>
        
        <div>
            <div class="menu5-min" id="min">
                <p>表单</p>
                <a href="javascript:fun1();"><img
                        src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodeMax.png" alt=""></a>
            </div>
            <div class="menu5-max" id="max">
                <div style="background: url(#);">
                    <p id="formtit" >表单
                    </p>
                    <a href="javascript:fun2();"><img
                            src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodeMin.png"
                            alt="" style="float: right;margin: 2.5px 0;"></a>
                </div>
                <div class="menu5-max-til">
                    <p id="co">公司</p>
                    <p id="phone">电话</p>
                </div>
                <form report-submit="false" bindsubmit="" bindreset="" >
                    <textarea  readonly>输入内容</textarea>
                    <div>
                        <label for="username">
                            <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/user.png"
                                alt="" style="margin:10.5px 9px;">
                            <input type="text" id="username" placeholder="姓名">
                        </label>
                    </div>
                    <div>
                        <label for="password">
                            <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodephone.png"
                                alt="" style="margin:8.5px 11px;">
                            <input type="text" id="password" placeholder="密码（必填）">
                        </label>
                    </div>
                    <div>
                        <label for="place">
                            <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodelocation.png"
                                alt="" style="margin:9px 13.5px;">
                            <input type="text" id="place" placeholder="地址">
                        </label>
                    </div>
                    <input type="submit" id="submit" />
                </form>
            </div>
        </div>
    
        <a href="javascript:fun1();" id="rightbutton"></a>

        <script>
           function getScrollbarWidth() {
                var odiv = document.createElement('div'),
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll'
                }, i, scrollbarWidth;
                for (i in styles) odiv.style[i] = styles[i];
                document.body.appendChild(odiv);
                scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;
                odiv.remove();
                return scrollbarWidth;
            }
            window.onload = () => {
                var wid= screen.width-getScrollbarWidth()+'px';
	            document.getElementsByTagName("body")[0].style.width  = wid;
            }
            function fun1(){
                document.getElementById('min').style.display = "none";
                document.getElementById('max').style.display = "block";
            }
            function fun2(){
                document.getElementById('min').style.display = "block";
                document.getElementById('max').style.display = "none";
            }
            function move(){
                var div10=document.getElementsByClassName('li2')
                var div30=document.getElementsByClassName('a1')
                div10[0].style.backgroundColor= "#fff";
                div30[0].style.color="#000"
            }
            function leave(){
                var div20=document.getElementsByClassName('li2')
                var div40=document.getElementsByClassName('a1')
                div20[0].style.backgroundColor= "#99d022";
                div40[0].style.color="#fff";
            }
        </script>
</body>
</html>